<template>
  <div class="fillcontain">
    <div class="box">
      <h3>条件搜索</h3>
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="开始时间：">
          <el-date-picker
            v-model="inTime"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间：">
          <el-date-picker
            v-model="outTime"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small">查询搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box flex-between">
      <h3>统计报表</h3>
    </div>
    <div class="box">
      <div style="margin-bottom:10px;fontsize:14px">概览</div>
      <div class="flex-around" style="font-size:13px;font-weight:300;">
        <div class="flex-col">
          <span>系统用户</span>
          <span class="statistical-number">2138</span>
        </div>
        <div class="flex-col">
          <span>系统车辆</span>
          <span class="statistical-number">3138</span>
        </div>
        <div class="flex-col">
          <span>入库次数</span>
          <span class="statistical-number">123138</span>
        </div>
        <div class="flex-col">
          <span>出库次数</span>
          <span class="statistical-number">123138</span>
        </div>
        <div class="flex-col">
          <span>收费</span>
          <span class="statistical-number">88888</span>
        </div>
        <div class="flex-col">
          <span>异常次数</span>
          <span class="statistical-number">2</span>
        </div>
      </div>
    </div>
    <div class="box" id="myechart" style="width:600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {
        phone: ""
      },
      inTime: "",
      outTime: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  components: {},
  mounted() {
    this.myEcharts();
  },
  methods: {
    //绘制图表
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("myechart"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "入库数量"
        },
        tooltip: {},
        legend: {
          data: ["入库数量"]
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "数量",
            type: "line",
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            lineStyle: {
              color: "blue"
            },
            areaStyle: { color: "blue" }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.offset = (val - 1) * this.limit;
    }
  }
};
</script>

<style lang="less">
// @import url("../style/mixin.less");
@import url("../style/main.less");
.table_container {
  padding: 20px;
}
.box {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  .el-form-item {
    margin: 20px 20px 0 0;
  }
  .statistical-number {
    font-size: 20px;
    font-weight: 400;
    color: #347bba;
  }
}
</style>
